<script lang="ts" setup>
import { ref } from 'vue'
import { QForm, type FormItemRows, QTable, type TableColums } from '@meetjs/element-plus-kit'
import { getApplication, getList } from '@/api/workflow/list'

const router = useRouter()
const treeData = ref<{ id: number; name: string; children?: { id: number; name: string }[] }[]>([])
const handleNodeClick = () => {}

const formRef = ref<InstanceType<typeof QForm>>()
const formValue = ref({
	name: ''
})
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '流程名称',
		prop: 'name',
		attrs: {
			style: 'width: 200px'
		}
	}
])

const onSearch = () => {
	getTableData()
}
const onReset = () => {
	getTableData()
}

const page = ref({
	currentPage: 2,
	pageSize: 10,
	total: 30
})

const loading = ref(false)
const tableData = ref([])
const columns = ref<TableColums[]>([
	{
		prop: 'code',
		label: '编码'
	},
	{
		prop: 'name',
		label: '名称'
	},
	{
		prop: 'applicationName',
		label: '分类'
	},
	{
		prop: 'createName',
		label: '创建人'
	},
	{
		prop: 'createTime',
		label: '创建时间'
	},
	{
		prop: 'description',
		label: '备注'
	},
	{
		prop: 'action',
		fixed: 'right',
		label: '操作',
		width: 330
	}
])

const getLeftData = async () => {
	const res = await getApplication()
	console.log(res, 'res')
	treeData.value = res.data
}

const getTableData = async () => {
	loading.value = true
	const res = await getList()
	tableData.value = res.data.row
	loading.value = false
}
const handelAdd = () => {
	router.push({
		path: '/workflow/graph',
		query: { mode: 'create' }
	})
}
const handelDetila = (row: any) => {
	router.push({
		path: '/workflow/graph',
		query: { mode: 'detail' }
	})
}

onMounted(() => {
	getLeftData()
	getTableData()
})

onMounted(() => {})
</script>
<template>
	<div class="bg-white p-5 h-full">
		<el-splitter>
			<el-splitter-panel size="16%">
				<div class="mr-3">
					<el-tree
						ref="deptTreeRef"
						:data="treeData"
						:props="{ label: 'name', children: 'children' }"
						:expand-on-click-node="false"
						node-key="id"
						highlight-current
						default-expand-all
						@nodeClick="handleNodeClick"
					/>
				</div>
			</el-splitter-panel>
			<el-splitter-panel :min="200">
				<div class="px-3 h-full relative">
					<div class="filter-box">
						<QForm
							ref="formRef"
							inline
							:model="formValue"
							:form-options="formOptions"
							:buttons="['search', 'reset']"
							@search="onSearch"
							@reset="onReset"
						/>
					</div>
					<div class="table-box">
						<QTable
							:loading="loading"
							:data="tableData"
							:columns="columns"
							:page="page"
						>
							<template #headerLeft>
								<el-button
									type="primary"
									@click="handelAdd"
								>
									新增
								</el-button>
							</template>
							<template #action>
								<el-button
									type="primary"
									size="small"
									text
								>
									停用
								</el-button>
								<el-button
									type="primary"
									size="small"
									text
									@click="handelDetila"
								>
									详情
								</el-button>
								<el-button
									type="danger"
									size="small"
									text
								>
									编辑
								</el-button>
								<el-button
									type="danger"
									size="small"
									text
								>
									删除
								</el-button>
								<el-button
									type="danger"
									size="small"
									text
								>
									导出
								</el-button>
							</template>
						</QTable>
					</div>
				</div>
			</el-splitter-panel>
		</el-splitter>
	</div>
</template>
<style lang="scss" scoped>
.table-box {
	:deep(.quick-table-footer) {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
	}
}
</style>
